<template>
    <div class="in">
        <Ph/>
        <header>
            <span class="posi iconfont icon-fangdajing"></span>
            <input type="text" placeholder="请输入蛋糕、鲜花、礼品或攻略">
        </header>
        <div class="split">
            <van-divider>热门搜索</van-divider>
        </div>
        <div class="box">
            <span class="item" v-for="(v,i) in arr" :key="i" @click="fun()">{{v}}</span>
        </div>

        <div class="split">
            <van-divider>搜索更多内容</van-divider>
        </div>
        <div class="nav">
            <span class="fa">
                <van-icon name="gift-card-o"/><span style="display:block; font-size:0.16rem">蛋糕</span>
            </span>
            <span class="fa">
                <van-icon name="flower-o" /><span style="display:block; font-size:0.16rem">鲜花</span>
            </span>
            <span class="fa">
                <van-icon name="point-gift-o" /><span style="display:block; font-size:0.16rem">礼品</span>
            </span>
            <span class="fa">
                <van-icon name="newspaper-o" /><span style="display:block; font-size:0.16rem">攻略</span>
            </span>
        </div>
    </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
import Ph from "@/components/ddgHD/publichead.vue"
import { Toast } from 'vant';
export default {
    data(){
        return {
            arr:[],
            txt:[]
        }
    },
    created(){
        getlink("/data/ddg").then((ok)=>{
            this.arr=ok.data.inputval
            this.txt=ok.data.logo
            console.log(ok.data.logo)
        })
    },
    components:{
        Ph
    },
    methods:{
        fun(){
            Toast('关注好啦~');
        }
    }
}
</script>

<style scoped>
    .in{
        font-size: 0.12rem;
        width: 100%;
    }
    header{
        position: relative;
        padding: 0.1rem;
        border-bottom: 1px solid #ddd;
    }
    .posi{
        position: relative;
        left: 5%;
    }
    input{
        width: 90%;
        text-indent: 0.2rem;
        outline: none;
        border: none;
        border: 1px solid #ddd;
        border-radius: 0.05rem;
        padding: 0.06rem;
    }
    .split{
        height: 0.15rem;
        line-height: 0.33rem;
        margin: 0.2rem 0;
        text-align: center;
        margin: 0 0.1rem;
        box-sizing: border-box;
    }
    .box{
        padding: 0.1rem;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .item{
        padding: 0.1rem 0.2rem;
        border: 1px solid gold;
        margin:0.05rem;
        border-radius:0.1rem;
    }
    .nav{
        display: flex;
        justify-content: space-evenly;
        margin: 0.2rem;
        font-size: 0.14rem;
        text-align: center;
    }
    .fa{
        font-size: 0.3rem;
        color: gray;
    }
</style>